<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml"
       xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <script th:src="@{static/js/vue.js}"></script>
    <script th:src="@{static/js/elementUI.js}"></script>
    <script th:src="@{static/js/axios.js}"></script>
    <link th:href="@{static/css/elementUI.css}" rel="stylesheet" />
    <style>
        /**/
        .text {
            font-size: 15px;
        }

        .item {
            margin-bottom: 5px;
        }
        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }
        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 100%;
        }
        #main{
            width: 80%;
            margin: auto;
            margin-top: 10px;
        }
        #dataTable{
            margin-top: 10px;
        }
        #form{
            line-height: 60px;
        }
        #top{
            /*height: 100px;*/
            /*overflow: hidden;*/
        }
        div{
            /*border: 1px red solid;*/
        }
    </style>
</head>

<body>
<div id="top">
    <el-card class="box-card" style="background-color: #EBEEF5">
        <span style="margin-left: 9%;margin-top: 5px;background-color: #3a8ee6;font-size: 15px">&nbsp;&nbsp;</span>
        <span style="font-size: 15px;margin-left: 10px">广告管理</span>
        <el-button style="float: right; padding: 3px 0;margin-right: 10%" type="text">刷新</el-button>
    </el-card>
</div>
<div id="main">
    <div id="form">
        <el-card class="box-card">
            <div slot="header" class="clearfix" style="height: 20px;line-height: 20px">
                <span style="font-size: 15px">筛选查询</span>
            </div>
            <div align="left">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="广告名称：" style="margin-left: 20px">
                        <el-input v-model="formInline.adsName" placeholder="填写广告的名称" style="margin-top: 15px"></el-input>
                    </el-form-item>
                    <el-form-item label="  广告位置：">
                        <el-select v-model="formInline.adsLocation" placeholder="选择广告的位置" style="margin-top: 15px">
                            <el-option label="所有位置" value="所有位置"></el-option>
                            <el-option label="首页轮播图" value="首页轮播图"></el-option>
                            <el-option label="app首页置顶" value="app首页置顶"></el-option>
                            <el-option label="app首页下拉栏" value="app下拉栏"></el-option>
                            <el-option label="首页右侧" value="首页右侧"></el-option>
                            <el-option label="app启动界面" value="app启动界面"></el-option>
                        </el-select>
                    </el-form-item>
<!--                    <el-form-item label="  到期时间：">-->
<!--                        <el-select v-model="" placeholder="选择广告到期时间" style="margin-top: 15px">-->
<!--                            <el-option label="1天内到期" value="1"></el-option>-->
<!--                            <el-option label="3天内到期" value="3"></el-option>-->
<!--                            <el-option label="7天内到期" value="7"></el-option>-->
<!--                        </el-select>-->
<!--                    </el-form-item>-->
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit" style="margin-top: 15px">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
    <div id="dataTable">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span style="font-size: 15px">广告列表</span>
                <el-button style="float: right" type="primary" @click="delByIds" size="small" plain>批量删除</el-button>
                <el-button style="float: right;margin-right: 10px" type="primary" @click="dialogFormVisible = true" size="small" plain>新增广告</el-button>
                <div id="medel_box_new">
                    <el-dialog title="帮助详情" :visible.sync="dialogFormVisible">
                        <el-form :model="form">
                            <el-form-item label="广告名称" :label-width="formLabelWidth">
                                <el-input v-model="form.adsName" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="广告位置" :label-width="formLabelWidth">
                                <el-select v-model="form.adsLocation" placeholder="请选择分类">
                                    <el-option label="首页轮播图" value="首页轮播图"></el-option>
                                    <el-option label="app首页置顶" value="app首页置顶"></el-option>
                                    <el-option label="app首页下拉栏" value="app下拉栏"></el-option>
                                    <el-option label="首页右侧" value="首页右侧"></el-option>
                                    <el-option label="app启动界面" value="app启动界面"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="开始时间" :label-width="formLabelWidth">
                                <el-date-picker
                                        v-model="form.beginTime"
                                        type="date"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="结束时间" :label-width="formLabelWidth">
                                <el-date-picker
                                        v-model="form.endTime"
                                        type="date"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="广告链接" :label-width="formLabelWidth">
                                <el-input v-model="form.src" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="广告备注" :label-width="formLabelWidth">
                                <el-input v-model="form.note" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click=ads_new()>确 定</el-button>
                        </div>
                    </el-dialog>
                </div>
            </div>
            <template>
                <!--  给表格绑定数据，tableData即为后端传过来的数据  -->
                <el-table
                        :data="tableData"
                        border
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                    <!--  用porp给这一列绑定 tableData中对应的属性 ，type=selection表示这一列是复选框 -->
                    <el-table-column
                            prop="id"
                            type="selection"
                            width="55">
                    </el-table-column>
                    <!--  label="编号"表示这一列的表头是“编号”,width代表这一列宽度 -->
                    <el-table-column
                            prop="adsNo"
                            label="编号"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="adsName"
                            label="广告名称"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="adsLocation"
                            label="广告位置"
                            width="110">
                    </el-table-column>
                    <el-table-column
                            label="开始时间"
                            width="165">
                        <template scope="scope">
                        <el-date-picker
                                v-model="scope.row.beginTime"
                                type="date"
                                placeholder="选择日期"
                                readonly
                                style="width: 140px">
                        </el-date-picker>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="结束时间"
                            width="165">
                        <template scope="scope">
                            <el-date-picker
                                    v-model="scope.row.endTime"
                                    type="date"
                                    placeholder="选择日期"
                                    readonly
                                    style="width: 140px">
                            </el-date-picker>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="上线/下线"
                            width="85">
                        <template scope="scope">
                            <el-switch
                                    on-text ="是"
                                    off-text = "否"
                                    on-color="#5B7BFA"
                                    off-color="#dadde5"
                                    v-model="scope.row.status"
                                    @change=change(scope.$index,scope.row)>
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="clickNum"
                            label="点击次数"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            prop="toOrder"
                            label="生成订单"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            label="操作">
                        <template scope="scope">
                        <el-button style="float:left; padding: 3px 0" type="text"
                                   @click=ads_view(scope.row)>查看&编辑</el-button>
                            <div id="medel_box">
                                <el-dialog title="帮助详情" :visible.sync="updateDialogFormVisible">
                                    <el-form :model="form">
                                        <el-form-item label="广告名称" :label-width="formLabelWidth">
                                            <el-input v-model="form.adsName" autocomplete="off"></el-input>
                                        </el-form-item>
                                        <el-form-item label="广告位置" :label-width="formLabelWidth">
                                            <el-select v-model="form.adsLocation" placeholder="请选择分类">
                                                <el-option label="所有位置" value="所有位置"></el-option>
                                                <el-option label="首页轮播图" value="首页轮播图"></el-option>
                                                <el-option label="app首页置顶" value="app首页置顶"></el-option>
                                                <el-option label="app首页下拉栏" value="app下拉栏"></el-option>
                                                <el-option label="首页右侧" value="首页右侧"></el-option>
                                                <el-option label="app启动界面" value="app启动界面"></el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="开始时间" :label-width="formLabelWidth">
                                            <el-date-picker
                                                    v-model="form.beginTime"
                                                    type="date"
                                                    placeholder="选择日期">
                                            </el-date-picker>
                                        </el-form-item>
                                        <el-form-item label="结束时间" :label-width="formLabelWidth">
                                            <el-date-picker
                                                    v-model="form.endTime"
                                                    type="date"
                                                    placeholder="选择日期">
                                            </el-date-picker>
                                        </el-form-item>
                                        <el-form-item label="广告链接" :label-width="formLabelWidth">
                                            <el-input v-model="form.src" autocomplete="off"></el-input>
                                        </el-form-item>
                                        <el-form-item label="广告备注" :label-width="formLabelWidth">
                                            <el-input v-model="form.note" autocomplete="off"></el-input>
                                        </el-form-item>
                                    </el-form>
                                    <div slot="footer" class="dialog-footer">
                                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                                        <el-button type="primary" @click=ads_update(scope.row)>确 定</el-button>
                                    </div>
                                </el-dialog>
                            </div>
                        <el-popconfirm
                                title="确认删除本条信息？"
                                @confirm=ads_del(scope.row)>
                            <el-button slot="reference" style="float: left; padding: 3px 0;margin-left: 10px" type="text">删除</el-button>
                        </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <template>
                <div class="block">
                    <!-- size-change绑定的是每页显示数量变化时执行的方法，
                     current-change绑定的是翻页时执行的方法，
                     page-sizes属性中的数组是 “每页显示多少条” 下拉框中的数据，
                     page-size属性时当前显示条数，
                     layout是翻页控件的布局顺序，
                     total绑定的是总共多少条数据-->
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </template>
        </el-card>
    </div>
</div>

<script th:inline="javascript">
    let app = new Vue({
            el:'#main',
            data:{
                //表格数据
                tableData:[],
                //总条数
                pageSize:10,
                //当前页
                currentPage:1,
                total:0,
                formInline: {
                    adsName: '',
                    adsLocation: ''
                },
                dialogFormVisible: false,
                updateDialogFormVisible:false,
                //修改模态框绑定的数据
                form: {
                    id:'',
                    adsName: '',
                    adsLocation: '',
                    beginTime:'',
                    endTime:'',
                    src:'',
                    note:''
                },
                formLabelWidth: '120px',
                multipleSelection:[],
                del_ids:[]
            },
            methods:{
                //向后端发起请求，加载表格内容，传的参数是当前查第几页
                getData(val){
                    axios.get([[@{ads/page}]],{
                        params:{
                            //每页多少条
                            limit:this.pageSize,
                            //从什么地方开始查
                            offSet:0,
                            //当前查第几页
                            pageNum:val,
                            //排序字段和排序方式
                            sort:"end_time",
                            sortOrder:"desc",
                            //要传属性的继续写在下面

                        }
                    }).then(res => {
                        //将查询到的数据赋给表格中绑定的变量
                        this.total = res.data.total;
                        this.tableData = res.data.rows;
                        for(let i = 0 ;i<this.tableData.length;i++){
                            if(this.tableData[i].status === 1){
                                this.tableData[i].status = true;
                            }
                            else{
                                this.tableData[i].status = false;
                            }
                        }
                    }).catch(error => {
                        console.log(error);
                    })
                },
                //改变每页显示数据条数时执行的方法
                handleSizeChange(val){
                    this.pageSize=val;
                    this.currentPage=1;
                    this.getData(this.currentPage);
                },
                //翻页时执行的方法
                handleCurrentChange(val) {
                    this.currentPage=val;
                    this.getData(this.currentPage);
                },
                // 点击修改时弹出模态框
                ads_view(row){
                    alert(row.src,row.note)
                    this.form.id = row.id;
                    this.form.adsName = row.adsName;
                    this.form.adsLocation = row.adsLocation;
                    this.form.beginTime = row.beginTime;
                    this.form.endTime = row.endTime;
                    this.form.src = row.src;
                    this.form.note = row.note;
                    this.updateDialogFormVisible = true;
                },
                ads_update(){
                    axios({
                        method:'PUT',
                        url:[[@{ads/infor}]],
                        data: this.form
                    }).then((res) => {
                        this.updateDialogFormVisible=false;
                        this.getData(this.currentPage);
                    }).catch((e)=>{
                        console.log(error);
                    })
                },
                delByIds(){
                    if(this.multipleSelection.length>0){
                        for(let i = 0;i<this.multipleSelection.length;i++){
                            this.del_ids.push(this.multipleSelection[i].id)
                        }
                        axios({
                            method:'PUT',
                            url:[[@{ads/delbyids}]],
                            data: this.del_ids
                        }).then((res) => {
                            this.del_ids = [];
                            this.getData(this.currentPage);
                            this.$message({
                                message: '批量删除成功',
                                type: 'success'
                            });
                        }).catch((e)=>{

                            console.log(error);
                        })
                    }else{
                        this.$message({
                            message: '请选择要删除的广告',
                            type: 'warning'
                        });
                    }
                },
                ads_new(){
                    axios({
                        method:'PUT',
                        url:[[@{ads/more}]],
                    data: this.form
                    }).then((res) => {
                        this.dialogFormVisible=false;
                        this.getData(1);
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                    }).catch((e)=>{

                        console.log(error);
                    })
                },
                //复选框选中状态改变时
                handleSelectionChange(val) {
                    console.log(val)
                    this.multipleSelection = val;
                },
                // 删除时执行的方法
                ads_del(val){
                    axios.delete([[@{ads/}]]+val.id,{

                    }).then(res => {
                        //将查询到的数据赋给表格中绑定的变量
                        this.getData(this.currentPage);
                    }).catch(error => {
                        console.log(error);
                    })
                },
                //修改状态的请求
                change:function(index,row){
                    let now_status = row.status?1:0;
                    axios.put([[@{ads/status/}]]+row.id+"/"+now_status,{

                    }).then(res => {
                        //将查询到的数据赋给表格中绑定的变量

                    }).catch(error => {
                        console.log(error);
                    })
                    console.log(row.id,row.status);
                },
                //表单提交
                onSubmit() {
                    if(this.formInline.adsLocation ==="所有位置"){
                        this.formInline.adsLocation = "";
                    }
                    axios.get([[@{ads/page}]],{
                        params:{
                            //每页多少条
                            limit:this.pageSize,
                            //从什么地方开始查
                            offSet:0,
                            //当前查第几页
                            pageNum:1,
                            //排序字段和排序方式
                            sort:"end_time",
                            sortOrder:"desc",
                            //要传属性的继续写在下面
                            adsName:this.formInline.adsName,
                            adsLocation:this.formInline.adsLocation
                        }
                    }).then(res => {
                        //将查询到的数据赋给表格中绑定的变量
                        this.total = res.data.total;
                        this.tableData = res.data.rows;
                        for(let i = 0 ;i<this.tableData.length;i++){
                            if(this.tableData[i].status === 1){
                                this.tableData[i].status = true;
                            }else{
                                this.tableData[i].status = false;
                            }
                        }
                    }).catch(error => {
                        console.log(error);
                    })
                }
            },
            //创建时执行查询，查第一页
            created : function () {
                this.getData(1);
            }
    });
    let app3 = new Vue({
        el:"#top"
    });
</script>
</body>
</html>